<!-- 书城列表组件 -->
<template>
  <div class="book-list-wrapper">
    <detail-title
      :title="title"
      :showShelf="true"
      @back="back"
      ref="title"
    ></detail-title>
    <Scroll
      class="book-list-scroll-wrapper"
      :top="42"
      @onScroll="onScroll"
      ref="scroll"
    >
      <Featured
        :data="value"
        :titleText="titleText ? titleText : getCategoryText(key)"
        :btnText="''"
        v-for="(value, key, index) in list"
        :key="index"
      ></Featured>
    </Scroll>
  </div>
</template>

<script>
import DetailTitle from '@/components/detail/DetaiTitle.vue';
import Scroll from '@/components/common/Scroll.vue';
import Featured from '@/components/home/Featured.vue';
import { realPx } from '@/utils/utils';
import { list } from '@/api/store';
import { categoryList, categoryText } from '@/utils/store';

export default {
  components: {
    DetailTitle,
    Scroll,
    Featured,
  },
  computed: {
    // 动态生成标题数据
    title() {
      if (this.list) {
        return (
          this.total && this.$t('home.allBook').replace('$1', this.totalNumber)
        );
      } else {
        return null;
      }
    },
    // 获取当前列表中电子书总数
    totalNumber() {
      let num = 0;
      Object.keys(this.list).forEach((key) => {
        num += this.list[key].length;
      });
      return num;
    },
  },
  data() {
    return {
      list: null,
      total: null,
    };
  },
  methods: {
    // 获取分类文本
    getCategoryText(key) {
      return `${categoryText(categoryList[key], this)}(${
        this.list[key].length
      })`;
    },
    back() {
      this.$router.go(-1);
    },
    // 标题阴影的隐藏状态
    onScroll(offsetY) {
      if (offsetY > realPx(42)) {
        this.$refs.title.showShadow();
      } else {
        this.$refs.title.hideShadow();
      }
    },
    // 通过API获取分类列表
    getList() {
      list().then((response) => {
        this.list = response.data.data;
        this.total = response.data.total;
        const category = this.$route.query.category;
        const keyword = this.$route.query.keyword;
        if (category) {
          // 如果用户传入了分类数据，则从结果中搜索相应的分类数据并进行展示
          const key = Object.keys(this.list).filter(
            (item) => item === category
          )[0];
          const data = this.list[key];
          this.list = {};
          this.list[key] = data;
        } else if (keyword) {
          console.log(this.list);

          // 如果用户输入了关键字，则通过书名进行关键字匹配（搜索算法）
          Object.keys(this.list).filter((key) => {
            this.list[key] = this.list[key].filter(
              (book) => book.fileName.indexOf(keyword) >= 0
            );
            return this.list[key].length > 0;
          });
        }
      });
    },
  },
  created() {
    this.getList();
    this.titleText = this.$route.query.categoryText;
  },
};
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global';

.book-list-wrapper {
  width: 100%;
  height: 100%;
  background: white;
}
</style>
